<template>
  <el-select
    v-model="inputValue"
    :class="className"
    :filterable="filterable"
    v-bind="$attrs"
    :clearable="clearable"
    :placeholder="placeholder"
  >
    <el-option v-for="item in list" :key="item.id" :label="item.projectName" :value="`${item.id}`"></el-option>
  </el-select>
</template>

<script>
import { assessmentOfAttachmentsGetProjectPlanning } from "@/api/assessment-of-attachments";
/**
 * 【项目单选框】组件，默认审批通过，目前没接口
 */
export default {
  name: "AssessmentOfAttachmentsSelector",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: [String, Number, Array],
      default: "",
    },
    className: {
      type: String,
      default: "w-full",
    },
    filterable: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    inputValue: {
      get() {
        return this.value ? `${this.value}` : "";
      },
      set(val) {
        const item = this.list.find((v) => {
          return v.id == val;
        });
        this.$emit("change", val, item);
      },
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      const param = {};
      assessmentOfAttachmentsGetProjectPlanning(param).then((data) => {
        console.log(
          "eee",
          data.map((item) => item.id),
        );
        this.list = data || [];
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
